<template>
  <div>
    <tree-transfer :pid="pid" :title="title" :button_text="['添加', '移除']" :from_data="fromData" :to_data="toData" :default-props="{label:'label'}" :mode="mode" height="540px" filter open-all @add-btn="add" @remove-btn="remove" />
  </div>
</template>
<script>
import treeTransfer from 'el-tree-transfer' // 引入
export default {
  components: { treeTransfer },
  props: {
    pid: {
      type: String,
      default: 'parentId'
    },
    fromData: { // 穿梭框 - 目标数据 - 树形
      type: Array,
      default: () => []
    },
    toData: { // 穿梭框 - 源数据 - 树形
      type: Array,
      default: () => []
    },
    title: { // 穿梭框左右两侧标题
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      mode: 'transfer' // 类型设置 transfer addressList

    }
  },
  methods: {
    // 监听穿梭框组件添加
    add (fromData, toData, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      console.log('fromData:', fromData)
      console.log('toData:', toData)
      console.log('obj:', obj)
      console.log(this.fromData)
    },
    // 监听穿梭框组件移除
    remove (fromData, toData, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      console.log('fromData:', fromData)
      console.log('toData:', toData)
      console.log('obj:', obj)
      console.log(this.fromData)
    }
  } // 注册
}
</script>

    <style scoped>
</style>
